// 获取canvas画布
const canvas = document.getElementById('canvas')
// 是否开启画笔，默认不开启
let enablePainting = false
// 是否开启橡皮
let enableEarser = false
// 画笔的颜色
let paintingColor = '#333'
// 画笔粗细
let lineWidth = 4
// 上一个点
const lastDot = { x: undefined, y: undefined }
// 新的点
const newDot = { x: undefined, y: undefined }
// 是否为移动设备
let isMobile = document.documentElement.ontouchstart !== undefined
// 选择颜色的li
const list = document.querySelectorAll('.color>li')
// 画笔
const pencil = document.querySelectorAll('.tool svg')[0]
// 线条
const line = document.querySelectorAll('.line-item')
// 橡皮擦
const earser = document.querySelectorAll('.tool svg')[1]
// 清除全部
const clear = document.querySelectorAll('.tool svg')[2]
// 下载
const download = document.querySelectorAll('.tool svg')[3]

// 设置画布的大小
setCanvasSize(canvas)
// 默认是第一个线条激活
line[0].querySelector('div').classList.add('active')
// 默认是黑色画笔激活
pencil.querySelector('path').style.fill = paintingColor

// 当可视区改变时再次设置画布大小
window.addEventListener('resize', function () {
  setCanvasSize(canvas)
})

// 设备检测
if (isMobile) {
  // 移动设备
  console.log('mobile')
  drawInMobieDevice()
} else {
  // 电脑设备
  console.log('laptop')
  drawInLaptop()
}

/**
 * PC上画画
 */
function drawInLaptop() {
  // 监听鼠标按下事件
  canvas.addEventListener('mousedown', function (e) {
    handleMouseDownOrTouchStart(e)
  })

  // 监听鼠标移动事件
  canvas.addEventListener('mousemove', function (e) {
    handleMouseMoveOrTouchMove(e)
  })

  // 监听鼠标抬起事件
  canvas.addEventListener('mouseup', function () {
    handleMouseUpOrTouchEnd()
  })

  // 修改画笔颜色
  list.forEach((el) => {
    el.addEventListener('click', function () {
      paintingColor = this.dataset.color
      pencil.querySelector('path').style.fill = paintingColor
    })
  })

  // 修改线条的粗细
  line.forEach((el, index) => {
    el.addEventListener('click', function () {
      lineWidth = (index + 1) * 4
      line.forEach((ele) => {
        ele.querySelector('div').classList.remove('active')
      })
      el.querySelector('div').classList.add('active')
    })
  })

  // 开启橡皮擦
  earser.addEventListener('click', function () {
    handleEnableEarser()
  })

  // 清除全部
  clear.addEventListener('click', function () {
    handleClear()
  })

  // 将canvas画布保存为png
  download.addEventListener('click', function () {
    DownloadCanvasAsImage(canvas)
  })
}

/**
 * 移动设备上画画
 */
function drawInMobieDevice() {
  // 监听手指按下事件
  canvas.addEventListener('touchstart', function (e) {
    handleMouseDownOrTouchStart(e)
  })

  // 监听手指移动事件
  canvas.addEventListener(
    'touchmove',
    function (e) {
      handleMouseMoveOrTouchMove(e)
      // iphone禁止上下拉露出浏览器灰色背景加上e.preventDefault()和{passive: false}
      e.preventDefault()
    },
    { passive: false }
  )

  // 监听手指抬起事件
  canvas.addEventListener('touchend', function () {
    handleMouseUpOrTouchEnd()
  })

  // 修改画笔颜色
  list.forEach((el) => {
    el.addEventListener('touchend', function () {
      paintingColor = this.dataset.color
      pencil.querySelector('path').style.fill = paintingColor
    })
  })

  // 修改线条的粗细
  line.forEach((el, index) => {
    el.addEventListener('touchend', function () {
      lineWidth = (index + 1) * 4
      line.forEach((ele) => {
        ele.querySelector('div').classList.remove('active')
      })
      el.querySelector('div').classList.add('active')
    })
  })

  // 开启橡皮擦
  earser.addEventListener('touchend', function () {
    handleEnableEarser()
  })

  // 清除全部
  clear.addEventListener('touchend', function () {
    handleClear()
  })

  // 将canvas画布保存为png
  download.addEventListener('touchend', function () {
    DownloadCanvasAsImage(canvas)
  })
}

document.addEventListener('mouseleave', function () {
  handleMouseUpOrTouchEnd()
})
